/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useState } from "react";
import PageHeaderLayout from "@/layouts/PageHeaderLayout";
import StandardTab from "@/components/StandardTab";
import { useSelector } from "dva";
import OrderRecord from "../components/OrderRecord";
import OrderStatistics from "../components/OrderStatistics";
import styles from "../commen.less";

const Index = () => {
  const [activeKey, setActiveKey] = useState("record");
  // sourceType 区分业务员（operator），微商（derivative），驿站（yz）
  const [sourceType, setSourceType] = useState("operator");

  const { key: accountKey } = useSelector(({ setting: { options = {} } = {} }) => options);
  // 是否是新零售账号
  const isYZ = accountKey === "yz";

  const tabList = isYZ
    ? [
        {
          key: "operator",
          tab: "业务员单号记录",
        },
        {
          key: "yz",
          tab: "驿站单号记录",
        },
        {
          key: "derivative",
          tab: "微商单号记录",
        },
      ]
    : [
        {
          key: "operator",
          tab: "业务员单号记录",
        },
        {
          key: "yz",
          tab: "驿站单号记录",
        },
      ];

  return (
    <PageHeaderLayout title="单号使用记录" tabList={tabList} onTabChange={key => setSourceType(key)}>
      <div className={styles.main}>
        <StandardTab
          // 通过改变key，强制使组件更新
          key={sourceType}
          onChange={key => setActiveKey(key)}
          activeKey={activeKey}
          panes={[
            {
              tab: "单号记录",
              key: "record",
              component: <OrderRecord sourceType={sourceType} activeKey={activeKey} />,
            },
            {
              tab: "单号使用统计",
              key: "statistics",
              component: <OrderStatistics sourceType={sourceType} activeKey={activeKey} />,
            },
          ]}
          name="record"
        />
      </div>
    </PageHeaderLayout>
  );
};

export default Index;
